Dialog Inlay
Dialog Inlays are used in page customization. Instead o being taken to a separate page to customize
the home page appearance, the user can make changes and view the effect firectly and in real time.

Best Pactices
  1. Best to use for secondary tools that are not primary to the main flow of the page.
  2. Animate a quick slide to smooth the introduction of the Dialog Overlay

List Inlay
List Inlay works as an effective way to hide detials until needed, while at the same
time preserving space on the page for high-leve, overview information.

Best Practices
  1. Use them for displaying details in-page instead of having user navigate to another page or popping up an overlay.
  2. Allow multiple items to be visible for parallel content (like filters in a search)


Detail Inlay
To show additional detail about items shown on a page. Details can be shown inline as well like tabs.
Best Practice for Detail Inlay
Use Detail Inlay to provide additional information in context witout hiding oyher information
Use Detail Inlay to avoid the anti pattern Hover and Cover
Make it easy to diss miss the Detail Inlay

Best Practices
  1. Use detail inlay to avoid “Hover and Cover”
  2. Make it easy to dismiss inlay


Tabs
Tabs are used to display additional information. Instead of mvoing the user from page
to page, tabs can be used to bring in content within the page, keeping the user on the page.

Best Practices

1.Activate tabs with a mouse click, not mouse hover
2. Put most important content in first tab